<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> 分享
		</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/icons-extra.css" />
        <link rel="stylesheet" type="text/css" href="../css/index.css" />
        <!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css"/>
		<link href="../css/mui.picker.css" rel="stylesheet" />
		<link href="../css/mui.poppicker.css" rel="stylesheet" />
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.picker.js"></script>
		<script src="../js/mui.poppicker.js"></script>
		<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<style>
		.mui-icon-extra{font-size: 24px; display: block; margin-top: 5px; line-height: 18px;}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-table-view" style="box-shadow:none; border: none;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">北方图书城</h1>
			<a class="mui-icon  mui-icon-more-filled mui-pull-right"></a>
		</header>
		<!--上传图片-->
		<div>
			<div class="shar-bg">				
				<div><a href="#picture"  style="padding: 5px 20px;"><img src="../images/chuan.png" width="80" height="80"></a></div>
			</div>			
		</div>
		<!--上传图片上拉内容-->
		<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#">拍照或录像</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#">选取现有的</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#picture"><b>取消</b></a>
				</li>
			</ul>
		</div>
		<!--表单-->
		<div class="mui-table-view mui-table-view-chevron">
			<div class="mui-content-padded" style="margin: 5px;">								
				<form class="mui-input-group">
					<div class="mui-input-row" style="font-size: 14px;">
						<label>书名 :</label>
						<input type="text" placeholder="请填写" style="font-size: 14px;">
					</div>
					<div class="mui-input-row" style="font-size: 14px;">
						<div style="float: left; padding-left: 4%; padding-top: 3%;">分享方式 :</div>
						<div class="mui-radio mui-left" style="float: left;">
						    <label>自提柜</label>
						    <input name="radio1" type="radio">
					    </div>
					    <div class=" mui-radio mui-left" style="float: left;">
						    <label>门店</label>
						    <input name="radio1" type="radio">
					    </div>
					    <div style="clear: both;"></div>
					</div>					
					<div class="mui-input-row"  style="font-size: 14px;">
						<label>省市区:</label>
					    <button id='showCityPicker3' type='button' style="border: none; margin-top: 1%;">选择地址</button>
				    <!--   <div id='cityResult3'></div>-->
					</div>				    
					<div class="mui-input-row"  style="font-size: 14px;">
						<label>门店/自提柜 :</label>
					    <button id='showUserPicker' type='button' style="border: none; margin-top: 1%;">财富中心</button>
				       <!-- <div id='userResult'></div>	-->
					</div>					
					<div class="mui-input-row" style="font-size: 14px;">
						<label>分享人姓名 :</label>
						<input type="text" placeholder="请填写" style="font-size: 14px;">
					</div>
					<div class="mui-input-row" style="font-size: 14px;">
						<label>联系电话 :</label>
						<input type="text" placeholder="请填写" style="font-size: 14px;">
					</div>
					<div class="mui-button-row">
			            <button type="button" class="mui-btn mui-btn-warning" onclick="javascript:window.location.href='over.html'">发布分享</button>&nbsp;&nbsp;
			             
					</div>
				</form>				
			</div>
		</div>
		
		
		<script>
			(function($, doc) {
				$.init();
				$.ready(function() {
					//普通示例
					var userPicker = new $.PopPicker();
					userPicker.setData([{
						value: 'ywj',
						text: '董事长 叶文洁'
					}, {
						value: 'aaa',
						text: '总经理 艾AA'
					}, {
						value: 'lj',
						text: '罗辑'
					}, {
						value: 'ymt',
						text: '云天明'
					}, {
						value: 'shq',
						text: '史强'
					}, {
						value: 'zhbh',
						text: '章北海'
					}, {
						value: 'zhy',
						text: '庄颜'
					}, {
						value: 'gyf',
						text: '关一帆'
					}, {
						value: 'zhz',
						text: '智子'
					}, {
						value: 'gezh', 
						text: '歌者'
					}]);
					var showUserPickerButton = doc.getElementById('showUserPicker');
					var userResult = doc.getElementById('userResult');
					showUserPickerButton.addEventListener('tap', function(event) {
						userPicker.show(function(items) {
							console.log(items[0].text);
							showUserPickerButton.innerText = ""+items[0].text+"";
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
					
					//-----------------------------------------
					//					//级联示例
					var cityPicker3 = new $.PopPicker({
						layer: 3
					});
					cityPicker3.setData(cityData3);
					var showCityPickerButton = doc.getElementById('showCityPicker3');
					var cityResult3 = doc.getElementById('cityResult3');
					showCityPickerButton.addEventListener('tap', function(event) {
						cityPicker3.show(function(items) {
							showCityPickerButton.innerText = "" + (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
				});
			})(mui, document);
			
			mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		mui('body').on('shown', '.mui-popover', function(e) {
			//console.log('shown', e.detail.id);//detail为当前popover元素
		});
		mui('body').on('hidden', '.mui-popover', function(e) {
			//console.log('hidden', e.detail.id);//detail为当前popover元素
		});
		var info = document.getElementById("info");
		mui('body').on('tap', '.mui-popover-action li>a', function() {
			var a = this,
				parent;
			//根据点击按钮，反推当前是哪个actionsheet
			for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
				if (parent.classList.contains('mui-popover-action')) {
					break;
				}
			}
			//关闭actionsheet
			mui('#' + parent.id).popover('toggle');
			info.innerHTML = "你刚点击了\"" + a.innerHTML + "\"按钮";
		})
		</script>
	</body>
</html>
